<template>
  <div class="container">
    <h2 class="title">管理员调配</h2>
    <el-table style="width: 100%" :data="tableData">
      <el-table-column label="分配日期" prop="createAt"> </el-table-column>
      <el-table-column label="用户ID" prop="user.userId"> </el-table-column>
      <el-table-column label="用户名" prop="user.username"> </el-table-column>

      <el-table-column label="昵称" prop="user.nickname"> </el-table-column>
      <el-table-column align="left">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model.trim="search"
            @input="handleSearch"
            size="mini"
            placeholder="搜索用户"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isAdmin"
            size="mini"
            @click="handleAdd(scope.$index, scope.row)"
            >添加为管理</el-button
          >
          <el-button
            v-else
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-count="page.pages"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
   
  
  <script>
import adminApi from "@/axios/adminApi";
import debounceWrapper from "@/commons/debounce";
export default {
  props: ["forumId"],
  data() {
    return {
      search: "",
      tableData: [],
      page: {
        current: 1,
        size: 10,
      },
    };
  },

  methods: {
    handleSearch: debounceWrapper(
      200,
      function () {
        if (this.search == "") return this.reloadData();
        this.page.current = 1;
        this.doSearch();
      },
      null
    ),
    doSearch() {
      adminApi
        .searchUser({
          q: this.search,
          forumId: this.forumId,
          current: this.page.current,
          size: this.page.size,
        })
        .then(({ data }) => {
          this.tableData = data.data.records;
          this.page.total = parseInt(data.data.total);
          this.page.pages = parseInt(data.data.pages);
        });
    },
    handleAdd(index, row) {
      adminApi
        .addAdmin({ forumId: this.forumId, userId: row.user.userId })
        .then(({ data }) => {
          this.$message.success("添加成功");
          row.isAdmin = true;
        });
    },

    handleDelete(index, row) {
      adminApi
        .delAdmin({ forumId: this.forumId, userId: row.user.userId })
        .then(({ data }) => {
          this.$message.success("删除成功");
          row.isAdmin = false;
        });
    },
    handleSizeChange(val) {
      this.page.size = val;
      this.reloadData();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.reloadData();
    },
    fetchAdminPage() {
      adminApi
        .getAdminPage({
          forumId: this.forumId,
          current: this.page.current,
          size: this.page.size,
        })
        .then(({ data }) => {
          this.tableData = data.data.records;
          this.page.total = parseInt(data.data.total);
          this.page.pages = parseInt(data.data.pages);
        });
    },
    reloadData() {
      if (this.search.length > 0) {
        this.doSearch();
      } else {
        this.fetchAdminPage();
      }
    },
  },
  created() {
    this.fetchAdminPage();
  },
};
</script>
  
  <style scoped lang="less">
.container {
  h2 {
    font-weight: 400;
    color: var(--text-regular);
    margin-bottom: 40px;
  }
}
</style>